<template>
    <el-table :data="state.week_data" height="700" 
    :default-sort="state.sort"
    @sort-change="sortChange"
    :cell-class-name="tableCellClassName"
    style="width: 100%">
        <el-table-column prop="date" label="日期" sortable width="230">
            <template #default="scope">
                <DateOperationComponent :mdata="scope.row" />
            </template>
        </el-table-column>
        <el-table-column prop="display" label="display" width="120">
            <template #default="scope">
                <ToDisplay :stock="scope.row.stock" :date="scope.row.date" :content="'d'"/>
                <ToMeanLine :stock="scope.row.stock" :date="scope.row.date" :content="'m'"/>
            </template>
        </el-table-column>
        <el-table-column prop="close" label="价格"/>
        <el-table-column prop="drawdown" label="drawdown" sortable/>
        <el-table-column prop="weekPct" label="周涨跌" sortable/>
        <el-table-column prop="pctSum" label="涨幅和" sortable>
            <template #default="scope">
                {{ numberFormat(scope.row.pctSum, 2) }}
            </template>
        </el-table-column>
        <el-table-column prop="incNum" label="incNum" sortable/>
        <el-table-column prop="lp" label="分位点" sortable/>
        <el-table-column prop="relLP" label="相对分位点" sortable/>
        <el-table-column prop="gb20wPct" label="20W" width="80" sortable/>
        <el-table-column prop="gb30wPct" label="30W" width="80" sortable/>
        <el-table-column prop="disPct" label="60W" width="80" sortable/>
        <el-table-column prop="yearLineDecrease" label="年线跌幅" sortable/>
    </el-table>
</template>

<script setup>
// 个股周数据详情页
import { reactive, watch } from 'vue';
import { getWeekData } from '../service/week';
import { weekStockSearch } from '../stores/week'
import { storeToRefs } from 'pinia';
import { getLpClassName, numberFormat } from '../utils/help';
import DateOperationComponent from './DateOperationComponent.vue';
import ToDisplay from './element/ToDisplay.vue';
import ToMeanLine from './element/ToMeanLine.vue';
import { useRouteQuery } from '../utils/useRoute';

const sortPropKey = "weekStockDetailSortProp"
const sortOrderKey = "weekStockDetailSortOrder"

const stockSearchStore = weekStockSearch()
let { input } = storeToRefs(stockSearchStore)

// 网址传参
let year = useRouteQuery("year","")
let stock = useRouteQuery("stock","")
if(stock) {
    input.value = stock
}
let op = useRouteQuery("op",0)

const state = reactive({
    week_data: [],
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'date' , 
        order: sessionStorage.getItem(sortOrderKey) || 'descending' 
    }
})


const reloadData = () => {
    getWeekData(input.value).then(res => {
        if (year) {
            state.week_data = res.data.reverse().filter(item => item.date.startsWith(year))
        } else if (op) {
            state.week_data = res.data.reverse().filter(item => item.operation != null)
        } else {
            state.week_data = res.data.reverse().slice(0, 150)
        }
    })
}

reloadData()

// 只监听pinia中某一个值的变化
watch(() => input.value, (newValue, oldValue) => {
    reloadData()
})

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {

    let columnProperty = column.property
    let val = row[columnProperty]

    if (["weekPct", "deSum","yearLineDecrease", "pctSum"].includes(columnProperty)) {
        if (val < 0) {
            return 'lt0-cell'
        }
    }

    if (columnProperty == "lp") {
        return getLpClassName(val)
    }

    if (columnProperty == "relLP") {
        if (val <= 1) {
            return 'rellplt1-cell'
        }
    }

    if (["w15DisPct", "disPct","gb20wPct","gb30wPct"].includes(columnProperty)) {
        if (row[columnProperty] >= 0) {
            return 'd300up-cell'
        } else {
            return 'd300down-cell'
        }
    }

    if (columnProperty == "drawdown") {
        if (val == 0) {
            return 'd300down-cell'
        }
    }

    return ''
}
</script>

<style scope>
</style>